<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/style.css" media="all">
    <link rel="stylesheet" type="text/css" href="../css/common.css" media="all">


    <style type="text/css">


        .list-neg {
            z-index:1;
            width:760px;
            overflow: hidden;
        }

        .list-neg-ul {
            margin-left: -10px;
        }

        .list-neg-item {
            width:144px;
            height: 180px;
            float: left;
            margin: 0 0 10px 10px;
        }

        .list-neg-bd {
            height: 100%;
            border: 1px solid #000;
            background: #f80;
        }

    </style>
</head>
<body>
<div class="m0a wrap2">
    <h1 class="title">负边距实现整齐的li列表</h1>
    <span class="description">
        是一种比较常用的方式 <br>
        这种与前面提到的一种方式：003-list-comm.less其实是类似的 <br>
        都是overflow:hidden; <br>
        此处，结合了-margin <br>
        有个比较麻烦的问题，就是这种列表，右边的popup如何显示？ <br>
        刚才看了一下 vancel的，他们是做了一个全局的：popup，这样可以保证不受overflow的限制。
        思路是：把每个对应的数据用data绑定到：element上，hover的时候，直接取这些数据设置到popup中，对应位置则用事件结合element的信息计算即可！
    </span>
    <div class="list-neg" >
        <div style="border: 1px solid #f00;">Just test Ruler </div>
    </div>
    <p class="blank10"></p>
    <div class="rel list-neg">
        <ul class="list-neg-ul">
            <li class="list-neg-item">
                <div class="list-neg-bd">
                    Content here!
                </div>
            </li>
            <li class="list-neg-item">
                <div class="list-neg-bd">
                    Content here!
                </div>
            </li>
            <li class="list-neg-item">
                <div class="list-neg-bd">
                    Content here!
                </div>
            </li>
            <li class="list-neg-item">
                <div class="list-neg-bd">
                    Content here!
                </div>
            </li>
            <li class="list-neg-item">
                <div class="list-neg-bd">
                    Content here!
                </div>
            </li>
            <li class="list-neg-item">
                <div class="list-neg-bd">
                    Content here!
                </div>
            </li>
            <li class="list-neg-item">
                <div class="list-neg-bd">
                    Content here!
                </div>
            </li>
        </ul>
    </div>

</div>
</body>
</html>